import React from 'react';
import { Helmet } from 'react-helmet-async';
import { useTranslation } from 'react-i18next';
import { getLanguageConfig } from '@/lib/seo';

interface DynamicHtmlProps {
  children: React.ReactNode;
}

export const DynamicHtml: React.FC<DynamicHtmlProps> = ({ children }) => {
  const { i18n } = useTranslation();
  const langConfig = getLanguageConfig(i18n.language);

  return (
    <>
      <Helmet>
        <html lang={langConfig.lang} />
        <meta charSet="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        {/* Basic SEO */}
        <meta name="robots" content="index, follow" />
        <meta name="author" content="豆豆Pay" />
        <meta name="theme-color" content="#2563eb" />

        {/* Open Graph / Facebook */}
        <meta property="og:site_name" content={langConfig.siteName} />
        <meta property="og:type" content="website" />

        {/* Twitter */}
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:site" content="@mamepay" />

        {/* Canonical URL will be set by individual pages */}
        <link rel="canonical" href={window.location.href} />

        {/* Favicon and icons */}
        <link rel="icon" type="image/png" href="/memapay-logo.png" />
        <link rel="apple-touch-icon" href="/memapay-logo.png" />

        {/* Preload critical resources */}
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
      </Helmet>
      {children}
    </>
  );
};
